<template>
  <div id="" class="leaseListDiv">
    <!--滑动区域-->
		<div id="mescroll" class="mescroll" style="position:fixed; top:50px;">
			<!--展示上拉加载的数据列表-->
      <ul id="dataList">
        <li v-for="(houseInfo,index) in pdlist" :key="houseInfo.key">
          <p class="leaseTit">
            <span>{{houseInfo.contractTitle}}</span>
            <!-- <em class="signed">&yen;{{houseInfo.billMoney}}</em> -->
            <em class="signed" v-if="houseInfo.payState==2">已支付</em>
            <em class="tuiRent" v-else-if="houseInfo.payState==4">已退租</em>
          </p>
          <div class="houseDiv">
            <!-- <img :src="houseInfo.housePic" alt="" class="houseImg"> -->
            <div class="houseImg" :style="{backgroundImage:'url(' + houseInfo.housePic + ')'}">

            </div>
            <div class="houseCon">
              <span class="title">{{houseInfo.billTitle}}</span>
              <p class="">租期{{setRentTime(index)}}</p>
              <p>&yen;{{(houseInfo.billMoney/100).toFixed(2)}}</p>
            </div>
          </div>
          <!-- <div class="btnBox">
            <button type="button" name="button" class="grayBtn">地址导航</button>
            <button type="button" name="button" class="btn">获取临时密码</button>
            <button type="button" name="button" class="inlineBtn">查看电子合同</button>
          </div> -->
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import MeScroll from 'mescroll.js';
import {timestampToTime} from '@/util/util.js';
import {Toast} from 'mint-ui';
export default {
  name: "",
  data: () => ({
    mescroll: null,
		pdlist: [],
    shortLease:[{
        imgUrl:'@/assets/images/img1.jpg',
        title:'入7月18日（周一）离7月29（周三）总计12晚',
        addr:'国贸阳光',
        rentTime:'(12点后可入住，14点前需退房)',
        price:1800,
        keywords:['有家整租','整租'],
    },{
        imgUrl:'@/assets/images/img1.jpg',
        title:'入7月18日（周一）离7月29（周三）总计12晚',
        addr:'国贸阳光',
        rentTime:'(12点后可入住，14点前需退房)',
        price:1800,
        keywords:['有家整租','整租'],
    },{
        imgUrl:'@/assets/images/img1.jpg',
        title:'入7月18日（周一）离7月29（周三）总计12晚',
        addr:'国贸阳光',
        rentTime:'(12点后可入住，14点前需退房)',
        price:1800,
        keywords:['有家整租','整租'],
    }]
  }),
  methods: {
    //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback: function(page) {
      //联网加载数据
      var self = this;
      self.getListDataFromNet(page.num, page.size, function(curPageData) {
        //curPageData=[]; //打开本行注释,可演示列表无任何数据empty的配置

        //如果是第一页需手动制空列表 (代替clearId和clearEmptyId的配置)
        if(page.num == 1) self.pdlist = [];

        //更新列表数据
        self.pdlist = self.pdlist.concat(curPageData);

        //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
        //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
        console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length+", self.pdlist.length==" + self.pdlist.length);

        //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
        self.mescroll.endSuccess(curPageData.length);

      }, function() {
        //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        self.mescroll.endErr();
      });
    },
    getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {

        this.$ajax.get(configUrl.USERBILLLIST_URL, {
          params: {
            payState:2,           //支付状态 1待支付 2支付成功
            currentPage: pageNum, //页码
            showCount: pageSize //每页长度
          }
        })
        .then((response) => {
          console.log(response);
          var data=response.data.dataList; // 模拟数据: ../res/pdlist1.js
          //         var listData=[];//模拟分页数据
          // for (var i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {
          //         if(i==data.length) break;
          //         listData.push(data[i]);
          //       }
                  successCallback&&successCallback(data);//成功回调
        })
        .catch((error) => {
          errorCallback&&errorCallback()//失败回调
        });
    },
    // 租期
    setRentTime(index) {
      let that = this;
      let dataList = that.pdlist[index];
      let beginDate = dataList.startDay;
      let endDate = dataList.endDay;
      return timestampToTime(beginDate) + '-' +timestampToTime(endDate);
    },
  },
  mounted() {
    //do something after mounting vue instance
    var self = this;
    self.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
      up: {
        callback: self.upCallback, //上拉回调
        //以下参数可删除,不配置
        isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
        //page:{size:8}, //可配置每页8条数据,默认10
        toTop:{ //配置回到顶部按钮
          // src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
          html: "top", //html标签内容,默认null; 如果同时设置了src,则优先取src
          offset : 200
        },
        empty:{ //配置列表无任何数据的提示
          warpId:"dataList",
          icon : require("@/assets/images/attention@2x.png") ,
                tip : "当前还没有房源订单~" ,
  //						  	btntext : "去逛逛 >" ,
  //						  	btnClick : function() {
  //						  		alert("点击了去逛逛按钮");
  //						  	}
        },
      }
    });
  }
    //房源状态 1空置  2已租 4租约快到期（到期前一个月） 8租约已到期  16续租待确认  32退租待处理  64转租中'

    // 租约关联房源  如果是2 ，4就是已签约，8 已退租，16 待签约
//     房源状态 1空置  2已租
// 租约状态 1.租约快到期（到期前一个月） 2租约已到期  3续租待确认  4退租待处理  5转租中  6 待签约  7已签约   8已退租  9待签约

}
</script>
<style lang="scss" scoped>

.leaseListDiv{
  background: #f5f5f5;
  li{
    background: white;
    padding:10px;
    margin-bottom: 10px;
  }
}
.leaseTit{
  @include flex;
  justify-content: space-between;
  span{
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  em{
    text-align: right;
    &.signed{
      color: $greenColor;
    }
    &.tuiRent{
      color:$blueColor;
    }
    &.waitSign{
      color: $redColor;
    }
  }
}
.houseDiv{
  @include flex;
  padding: 10px 0;
  .houseImg{
    border-radius: 4px;
    width: 100px;
    height: 80px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .houseCon{
    margin-left: 10px;
    @include flexcell;
    @include flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    // height: 80px;
    color: $grayColor;
  }
  .title{
    font-weight: 550;
    color: $lightColor;
  }
}
.btnBox{
  @include flex;
  button{
    @include flexcell;
    margin-right: 10px;
    height: 2.4rem;
    &.inlineBtn{
      // flex:2;
      margin-right: 0;
    }
  }
}
.keywords{
  span{
    margin-right: 6px;
    margin-bottom: 4px;
    display: inline-block;
    background: #eef0f4;
    color: #8996a2;
    border-radius: 4px;
    padding:2px 6px;
    font-size: 10px;
  }
}
</style>
